<template>
  <!-- 全屏包装器 -->
  <div
    :class="[
      'jc-pop-up-wrapper',
      {
        'jc-pop-up-enable-pointer': !useMask,
        'jc-pop-up-wrapper-center': align === 'center',
        'jc-pop-up-wrapper-top': align === 'top'
      }
    ]"
    v-if="_showPopup"
    :style="style"
  >
    <!--弹窗内容窗口-->
    <div class="jc-pop-up-window">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'UsePopupWindow'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'

const _showPopup = ref(true)

const props = withDefaults(
  defineProps<{
    width?: string
    height?: string
    align?: 'center' | 'top' | 'bottom'
    index?: number
    useMask?: boolean
    radius?: string
  }>(),
  {
    width: '290px',
    height: '160px',
    align: 'center',
    index: 16999999,
    useMask: false,
    radius: '4px'
  }
)

const style = ref(
  `--jc-pop-up-wrapper-border-radius:${props.radius};--jc-pop-up-wrapper-index:${props.index};--pop-up-window-width:${props.width}; --pop-up-window-height:${props.height}; `
)
</script>

<style lang="scss" scoped>
.jc-pop-up-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: var(--jc-pop-up-wrapper-index);
  overflow: hidden;

  .jc-pop-up-window {
    position: relative;
    width: var(--pop-up-window-width);
    height: var(--pop-up-window-height);
    pointer-events: none;
    opacity: 1;
    border-radius: var(--jc-pop-up-wrapper-border-radius);
  }
}

.jc-pop-up-mask {
  background-color: #3f3f3f57;
}

.jc-pop-up-enable-pointer {
  pointer-events: none;
}

.jc-pop-up-wrapper-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.jc-pop-up-wrapper-center {
  display: grid;
  place-content: center;
}
</style>
